<template>
    <view class="container">
        <mescroll-body @init="mescrollInit" :down="downOption" @down="refresh" :up="upOption" @up="getData">
            <view v-for="(item, index) in recordList" :key="index" class="item">
                <view class="item-left" :class="item.MoneyType == 1 ? 'flex-d-c' : ''">
                    <text v-if="item.MoneyType == 2" class="unit">￥</text>
                    <text class="money">{{ item.Money }}</text>
                    <text v-if="item.MoneyType == 1" class="unit-1">积分</text>
                </view>
                <view class="item-right">
                    <view class="title text-show-line-1">{{ item.Title }}</view>
                    <view class="card">卡号：{{ item.CouponCode }}</view>
                </view>
            </view>
        </mescroll-body>
        <!-- 	<view v-for="(item,index) in List" :key="index" class="item ">
			<view class="item-left " :class="item.MoneyType==1?'flex-d-c':''">
				<text v-if="item.MoneyType==2" class="unit ">￥</text>
				<text class="money">{{ item.Money }}</text>
				<text v-if="item.MoneyType==1" class="unit-1">积分</text>
			</view>
			<view class="item-right">
				<view class="title text-show-line-1">{{ item.Title }}</view>
				<view class=" card">卡号：{{ item.CouponCode }}</view>
			</view>
		</view> -->
    </view>
</template>

<script>
import { GetCodePage } from "@/service/api/starcoupon.js"
export default {
    data() {
        return {
            List: [
                {
                    MoneyType: 1,
                    Money: 200,
                    Title: "测试",
                    CouponCode: "jhhd2134958",
                },
                {
                    MoneyType: 1,
                    Money: 200,
                    Title: "测试",
                    CouponCode: "jhhd2134958",
                },
                {
                    MoneyType: 2,
                    Money: 20,
                    Title: "测试",
                    CouponCode: "jhhd2134958",
                },
                {
                    MoneyType: 1,
                    Money: 200,
                    Title: "测试",
                    CouponCode: "jhhd2134958",
                },
            ],
            recordList: [],
            isFrist: true,
        }
    },
    mounted() {
        this.isFrist = false
        this.refresh()
    },
    onShow() {
        if (!this.isFrist) {
            this.refresh()
        }
    },
    methods: {
        getData(page) {
            let param = {
                pageSize: page.size,
                pageIndex: page.num,
            }
            GetCodePage(param).then((res) => {
                this.mescroll.endBySize(res.Data.length, res.RecordAmout)
                if (param.pageSize == 1) {
                    this.recordList = []
                }
                this.recordList = this.recordList.concat(res.Data)
            })
        },
        refresh() {
            this.recordList = []
            this.mescroll.resetUpScroll()
        },
    },
}
</script>

<style lang="scss" scoped>
.flex-d-c {
    flex-direction: column;
}
.item {
    margin: 24rpx;
    background: #fff;
    border-radius: 24rpx;
    padding: 24rpx 0;
    display: flex;
    align-items: center;
    .item-left {
        width: 220rpx;
        padding: 0 24rpx;
        color: $app-color-main;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        .unit {
            font-size: 32rpx;
            padding-top: 20rpx;
        }
        .money {
            font-size: 64rpx;
            font-weight: bold;
            line-height: 1;
        }
        .unit-1 {
            font-size: 32rpx;
        }
    }

    .item-right {
        border-left: 2rpx solid #f0f0f0;
        padding: 0 20rpx;
        position: relative;
        min-height: 110rpx;
        display: flex;
        flex-direction: column;
        justify-content: center;
        flex: 1;
        &:before,
        &:after {
            content: "";
            position: absolute;
            width: 24rpx;
            height: 24rpx;
            border-radius: 100%;
            background: #f5f5f5;
            top: -36rpx;
            left: -12rpx;
        }

        &:after {
            top: auto;
            bottom: -36rpx;
        }
        .title {
            font-size: 32rpx;
            font-weight: bold;
        }
        .card {
            margin-top: 12rpx;
            font-size: 24rpx;
            color: $color-gray-2;
        }
    }
}
</style>
